<!--时间，没有ID-->
<template>
  <el-time-select
    v-model="mytime"
    v-bind="$attrs"
    :name="'c' + meta.columnId"
    :clearable="clearable"
    :format="showFormat"
    @change="myChange"
  >
  </el-time-select>
</template>

<script setup lang="ts" generic="T extends object">
  import { ref, watch } from 'vue'
  import type { IFormChildProps } from '../map'
  import { itemController, EControlType } from '../map'

  defineOptions({
    name: 'el-from-item-time-select',
    inheritAttrs: false,
  })

/**
 * 日期管理类
 * * 功能：
 * ** 按照类型提交数据，不是date()
 * ** 监听属性，设置value
 * * 参数：
 * ** value： control类的value
 * ** mySubmit： control类的mySubmit，直接就提交了
 * ** controlType：属性里的控件类型
 * * 返回
 * ** 绑定控件的 mydate
 * ** change 事件的 myChange
 */
const timeManage = (value) => {
  // 日期控件用的v-model，便于做类型转换
  const mytime = ref('')

  if (value.value !== null) {
    mytime.value = value.value
  }

  // 监听属性，设置给 mydate
  watch(() => value.value, (v1, v2) => {
    // 
    mytime.value = v1
  })

  // 向父组件提交数据。
  const myChange = (_val) => {
    value.value = _val // 提交给父组件

  }

  return {
    mytime,
    myChange
  }
}


  const props = withDefaults(defineProps<IFormChildProps<T> & {
    showFormat?: string,
    returnFormat?: string
  }>(), {
    meta: () => {
      return {
        colName: '',
        controlType: EControlType.timeselect
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true,
    showFormat: 'HH:mm',
    returnFormat: 'HH:mm'
  })
  
  const { value } = itemController(props)

  const { mytime, myChange } = timeManage(value)

</script>
